<template>
	<view>
		<view class="top-bg">
			<image class="user-bg" src="@/static/my/userBg.png"></image>
			<view class="user-info">
				<view class="flex-space-between" style="flex: 1; align-items: center;justify-content: start;">
					<u-avatar class="m-r-20" size="120" :src="user.headPic"></u-avatar>
					<view>
						<view style="display: flex;align-items: center;" @click="userDetails()">
							<text class="small-title m-r-20">{{ user.nickname || '' }}</text>
							<!-- <u-icon name="edit-pen" size="36"></u-icon> -->
						
						</view>
						<view style="display: flex;align-items: center;" v-if="user.number" >
							<text class="m-r-20" style="color: #C11C2F;">编号：{{user.number || ''}}</text>
							<!-- <u-icon name="edit-pen" size="36"></u-icon> -->
							<image style="width: 98rpx; height: 60rpx;" src="@/static/my/vip.png" v-if="user.role == 1"></image>
							<image style="width: 166rpx; height: 60rpx;" src="@/static/my/gudong.png" v-if="user.role == 2"></image>
							<image style="width: 105rpx; height: 60rpx;" src="@/static/my/hehuoren.png" v-if="user.role == 3"></image>
						</view>
						
						<!-- <view class="auxiliary-text">{{ user.telephone || '' }}</view> -->
					</view>
				</view>
				<view @click="userDetails()">
					<u-icon name="edit-pen" size="36" ></u-icon>
				</view>
				<!-- <image class="exit-img" src="@/static/my/exit.png" @click="agentLogout()"></image> -->
			</view>
		</view>
		
		<view class="vip-box"  @click="vip()" v-if="$store.state.user.userInfo.token">
			<view style="display: flex;align-items: center;">
				<image style="width: 110rpx;height: 100rpx;" src="https://static.bxscs.cn/pic/20241010/db2fd0c1f49d4c7fc30b055518f77827.png"></image>
				<view>
					<view >北溪生畅享平台会员</view>
					<view style="color: rgba(81, 43, 24, 0.5);">尊享专属特权</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<text >开通会员</text>
				<image style="width: 33rpx;height: 33rpx;" src="https://static.bxscs.cn/pic/20241010/bec30176730601fb05c3e6efec0819aa.png"></image>
			</view>
		</view>
		

		<view class="container-box">
			<view class="m-b-20">
				<u-section title="全部订单" sub-title="查看全部" :show-line="false" @click="order()"></u-section>
			</view>
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item, index) of orderList" :key="index" @click="cell('orderList', index)">
					<image class="icon" :src="item.img"></image>
					<view class="grid-text">{{ item.title }}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="container-box">
			<view class="m-b-20">
				<u-section title="常用功能" :show-line="false" :right="false"></u-section>
			</view>
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item, index) of commonList" :key="index" @click="cell('commonList', index)">
					<image class="icon" :src="item.img"></image>
					<view class="grid-text">{{ item.title }}</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="container-box" v-if="user.role == 2 || user.role == 1000">
			<view v-if="user.role == 2">
				<u-section title="我的股东成员" :show-line="false" sub-title="查看" @click="goUrl('agentList')"></u-section>
			</view>
			<view v-if="user.role == 1000">
				<u-section title="股东投资人成员" :show-line="false" sub-title="查看" @click="goUrl('businessList')"></u-section>
			</view>
		</view>
		
		<view class="container-box">
			<view class="m-b-40">
				<u-section title="填写邀请人" :show-line="false" :sub-title="user.inviteUserName ? user.inviteUserName : '点击绑定'" @click="popChange() " ></u-section>
			</view>
			<view >
				<u-section :title="'我的邀请码（'+user.inviteCode+'）'" :show-line="false"  sub-title="复制邀请码" @click="copy()" v-if="user.inviteCode"></u-section>
			</view>
		</view>
		
		
		<view class="container-box" v-if="user.id == null">
			<!-- <view class="btn" v-if="user.id" @click="agentLogout()">退出登录</view> -->
			<block 
				<view class="btn" style="margin-bottom: 30rpx;"  @click="agentLogout('注册')">注册</view>
				<view class="btn"  @click="agentLogout()">登录</view>
			</block>
		</view>
		
		<u-popup v-model="customerMobilePopShow" mode="center" :border-radius="10"  :closeable="true" zIndex="99999">
			<view class="share-box">
				<view class="title"   style="text-align: center;">客户电话</view>
				<view class="tab-box" v-if="sysConfigData">
					{{sysConfigData.customerMobile || ''}}
				</view>
				<view class="confirm-btn" :hairline="false" @click="customerMobileCopy()">
					复制
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="popShow" mode="center" :border-radius="10"  :closeable="true" zIndex="99999">
			<view class="share-box">
				<view class="title"   style="text-align: center;">填写邀请人</view>
				<view class="tab-box">
					<u-input style="flex: 1;padding: 20rpx;" v-model="invitationCode" :border="true" height="70" type="text" :clearable="false"/>
				</view>
				<view class="confirm-btn" :hairline="false" @click="confirm()">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	userInfo,
	sysConfig,
	inviteCode,
	vipOrder,
	vipInfo
} from '@/common/api/my';
export default {
	data() {
		return {
			user: {
				headPic: null,
				nickname: null,
				telephone: null,
				id:'',
				number:null,
			},
			orderList: [
				{ img: '/static/my/daifuku.png', title: '待付款', url: '/subPackages/my/order/index?orderStatus=1' },
				{ img: '/static/my/daifahuo.png', title: '待发货', url: '/subPackages/my/order/index?orderStatus=2' },
				{ img: '/static/my/daishouhuo.png', title: '待收货', url: '/subPackages/my/order/index?orderStatus=3' },
				{ img: '/static/my/yiwancheng.png', title: '已完成', url: '/subPackages/my/order/index?orderStatus=4' },
			],
			commonList: [
				{ img: '/static/my/dizhi.png', title: '收货地址', url: '/subPackages/cart/addressList/index' },
				{ img: '/static/my/shouchang.png', title: '我的收藏', url: '/subPackages/my/collect/index' },
				{ img: '/static/my/kefu.png', title: '联系客服', function: 'makePhoneCall' },
				{ img: '/static/my/women.png', title: '关于我们', url: '/subPackages/my/about/index' },
			],
			popShow:false,
			invitationCode:'',
			vipInfoData:{
				price:0,
			},
			sysConfigData:null,
			customerMobilePopShow:false
		}
	},
	onLoad() {
		this.getSysConfig()
	},
	onShow() {
		if (this.$store.state.user.userInfo.token) {
			this.info()
			this.getVipInfo()
		} else {
			this.user = {
				headPic: null,
				nickname: null,
				telephone: null,
				id:null,
				number:null,
			}
		}
	},
	methods: {

		// 配置项
		getSysConfig() {
			sysConfig({}).then(res => {
				if (res.code === 200) {
					this.sysConfigData = res.data
				}
			})
		},
		
		// vip配置项
		getVipInfo() {
			vipInfo({}).then(res => {
				if (res.code === 200) {
					this.vipInfoData = res.data
				}
			})
		},

		// 用户信息
		info() {
			userInfo({}).then(res => {
				if (res.code === 200) {
					this.user = res.data
					this.$store.commit("user/SET_USER_INFO", res.data)
				}
			})
		},

		// 用户信息
		userDetails() {
			uni.navigateTo({
				url: '/subPackages/my/userInfo/index'
			})
		},

		// 全部订单
		order() {
			uni.navigateTo({
				url: '/subPackages/my/order/index'
			})
		},

		// 列表跳转页
		cell(listName, index) {
			if (this[listName][index].function) {
				this[this[listName][index].function]()
				return
			}
			uni.navigateTo({
				url: this[listName][index].url
			})
		},

		// 退出登录
		agentLogout(title = null) {
			let url ='/subPackages/my/logon/index'
			if(title){
				url+= '?title=' +title
			}
			if (this.$store.state.user.userInfo.token) {
				uni.showModal({
					title: '提示',
					content: '确定退出登录',
					confirmColor:'#C11C2F',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit("user/SET_USER_INFO", {})
							uni.navigateTo({
								url: url
							})
						}
					}
				});
			} else {
				this.$store.commit("user/SET_USER_INFO", {})
				uni.navigateTo({
					url: url
				})
			}
		},

		// 拨打电话
		makePhoneCall() {
			this.customerMobilePopShow = true
			// uni.makePhoneCall({
			// 	phoneNumber: this.sysConfigData.customerMobile
			// });
		},
		
		customerMobileCopy(){
			  let that = this
			  uni.setClipboardData({
				data: this.sysConfigData.customerMobile,
				showToast:false,
				success: function () {
					that.customerMobilePopShow = false
					setTimeout(() => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					}, 500);
				}
			  });
		},
		
		popChange(){
			if(this.user.inviteUserName) return
			this.popShow = true;
			this.invitationCode = '';
		},
		
		copy(){
			  uni.setClipboardData({
				data: this.$store.state.user.userInfo.inviteCode,
				success: function () {
					setTimeout(() => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					}, 500);
				}
			  });
		},
		
		confirm(){
			inviteCode({
				inviteCode:this.invitationCode
			}).then(res => {
				if (res.code === 200) {
					this.popShow = false;
					this.invitationCode = '';
					setTimeout(() => {
						uni.showToast({
							title: '绑定成功',
							icon: 'none',
						});
					}, 500);
					this.info()
				}
			})
		},
		
		// 合伙人列表
		goUrl(type){
			uni.navigateTo({
				url: '/subPackages/my/' + type + '/index'
			})
		},
		
		vip(){
			uni.navigateTo({
				url: '/subPackages/my/vip/index'
			})
			// vipOrder({}).then(res => {
			// 	if (res.code === 200) {
			// 		uni.navigateTo({
			// 			url: '/subPackages/cart/payment/index?order_no=' + res.data.orderNo + '&type=vip' 
			// 		})
			// 	}
			// })
			
			
		},
	}
}
</script>

<style lang="scss" scoped>
.top-bg {
	.user-bg {
		width: 750rpx;
		height: 333rpx;
	}

	.user-info {
		width: 710rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 16rpx;
		position: relative;
		margin: -200rpx auto 0;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		z-index: 999;
		display: flex;
		align-items: center;

		.exit-img {
			width: 50rpx;
			height: 50rpx;
		}
	}
}

.container-box {
	width: 710rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto;

	.icon {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 7rpx;
	}
}


.share-box {
	width: 80vw;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding: 30rpx;
	box-sizing: border-box;

	.tab-box {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.confirm-btn {
		margin: 20rpx 0 0;
		height: 80rpx;
		background: #C11C2F;
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}

.btn{
	flex: 1;
	height: 80rpx;
	border-radius: 10rpx;
	background:  #C11C2F;
	font-weight: 600;
	font-size: 28rpx;
	color: #fff;
	line-height: 80rpx;
	text-align: center;
	margin-left: 10rpx;
}

.vip-box{
	background: url('https://static.bxscs.cn/pic/20241010/795fba3fe99dc33e469516715b01d2ea.png') no-repeat;
	width: 710rpx;
	height: 120rpx;
	background-size: 100% 100%;
	margin: 20rpx auto;
	padding: 20rpx 30rpx;
	padding-left: 10rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	font-size: 28rpx;
	color: #512B18;
	image{
		margin: 0 16rpx;
	}
}
</style>